<template>
  <el-form :model="form" ref="myForm" :rules="formRules" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      formRules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9_]{3,20}$/,
            message:
              "用户名必须由大小写字母、数字和下划线组成，且长度在 3 到 20 之间",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/,
            message:
              "密码必须由大小写字母、数字和下划线组成，且长度在 6 到 20 之间",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          // 表单验证通过，可以提交数据或执行其他操作
          console.log("Form is valid, submitting data:", this.form);
          // 显示成功提示
          this.$message.success("表单验证通过，提交成功！");
        } else {
          // 表单验证失败
          console.log("Form is invalid");
          // 表单验证失败，显示错误消息
          this.$message.error("表单验证不通过，请检查输入");
        }
      });
    },
    resetForm() {
      // 重置表单数据
      this.form = {
        username: "",
        password: "",
      };
      // 清除表单的验证状态
      this.$refs.myForm.clearValidate(); //清除表单的验证状态
      this.$message.success("表单已重置");
      this.$refs.myForm.resetFields(); //重置表单
    },

    //从后端接口请求数据
    async getData() {
      const res = await this.$http.get("/api/user");
      console.log(res);
    },
  },
  //生命周期
  //创建
  created() {
    // this.getData();
  },
  //挂载
  mounted() {},
  //销毁
  destroyed() {},
};
</script>
<style scoped>
/* //全屏覆盖的黑色半透明浮层，黑色透明度是75% */
.el-loading-mask {
  background-color: rgba(0, 0, 0, 0.75);
}
/* 写一段CSS，灰色分隔线，高度1像素 */
.el-form-item__content {
  border-bottom: 1px solid #ccc;
}
/* 写一段给图片元素添加样式的CSS，图片宽高都是10rem大小，图像内容填充方式是cover */
.demo-image__preview img {
  width: 10rem;
  height: 10rem;
  object-fit: cover;
}
</style>
 center: { lng: 121.3808408, lat: 28.3761941},